<template>
  <el-container>
    <el-header>编辑充电站</el-header>
    <el-main>
      <el-form :model="form" label-width="140px" :inline="true">
        <el-form-item label="充电站名称">
          <el-input v-model="form.name" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="充电站类型">
          <el-input v-model="form.type" style="width: 300px"></el-input>
        </el-form-item>
      </el-form>

      <el-form :model="form" label-width="150px" :inline="true">
        <el-form-item label="最大充电桩数">
          <el-input v-model="form.maxChargers" style="width: 150px">
            <i slot="suffix" style="margin-right: 10px;">台</i>
          </el-input>
        </el-form-item>
        <el-form-item label="电池状态">
          <el-input v-model="form.batteryStatus"></el-input>
        </el-form-item>
        <el-form-item label="图片上传">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>

      
      <el-divider></el-divider>

      <el-form :model="form" label-width="140px" :inline="true">
        <el-form-item label="充电站编号">
          <el-input v-model="form.stationId"></el-input>
        </el-form-item>
        <el-form-item label="电池位置">
          <el-input v-model="form.batteryLocation"></el-input>
        </el-form-item>
        <el-form-item label="电池负责人">
          <el-input v-model="form.batteryManager"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="营业时间">
          <el-time-picker
            v-model="form.businessHours"
            is-range
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          ></el-time-picker>
        </el-form-item>
      </el-form>

      <el-divider></el-divider>
      <el-form>
        <el-button type="success">确定</el-button>
        <el-button type="info">返回</el-button>
      </el-form>

      

    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: "",
        type: "",
        maxChargers: "",
        batteryStatus: "",
        stationId: "HFC2220200001",
        batteryLocation: "广州天河XX1号",
        batteryManager: "管理员1",
        phone: "13800138001",
        businessHours: [
          new Date(2023, 9, 10, 0, 0),
          new Date(2023, 9, 10, 24, 0),
        ],
      },
      chargers: [
        {
          id: 1,
          chargerId: "ZGSB202000011",
          chargerName: "光盘直流充电桩11",
          chargerCategory: "汽车充电桩",
          chargerType: "直流柱",
          chargerCount: 2,
          power: "96 kW",
        },
        {
          id: 2,
          chargerId: "ZGSB202000012",
          chargerName: "光盘直流充电桩12",
          chargerCategory: "汽车充电桩",
          chargerType: "直流柱",
          chargerCount: 2,
          power: "96 kW",
        },
        {
          id: 3,
          chargerId: "ZGSB202000013",
          chargerName: "光盘直流充电桩13",
          chargerCategory: "汽车充电桩",
          chargerType: "直流柱",
          chargerCount: 2,
          power: "96 kW",
        },
        {
          id: 4,
          chargerId: "ZGSB202000014",
          chargerName: "光盘直流充电桩14",
          chargerCategory: "汽车充电桩",
          chargerType: "直流柱",
          chargerCount: 2,
          power: "96 kW",
        },
        {
          id: 5,
          chargerId: "ZGSB202000015",
          chargerName: "光盘直流充电桩15",
          chargerCategory: "汽车充电桩",
          chargerType: "直流柱",
          chargerCount: 2,
          power: "96 kW",
        },
      ],
      pricing: [
        {
          id: 1,
          periodType: "关",
          startTime: "07:00:00",
          endTime: "09:00:00",
          rate: "¥1.5",
          serviceFee: "¥6.8",
        },
        {
          id: 2,
          periodType: "峰",
          startTime: "09:00:00",
          endTime: "12:00:00",
          rate: "¥1.1",
          serviceFee: "¥6.7",
        },
      ],
    };
  },
  methods: {

  },
  created() {
    // 获取路由参数
    console.log("接收到的id:" + this.$route.params.id);
  }
};
</script>

<style scoped>
.el-header {
  background-color: #409eff;
  color: white;
  line-height: 60px;
  text-align: center;
}
</style>